<template>
  <div class="seckill">
    <div class="title">
      <div class="seckill-visible">
        <!-- 选择是否显示某类型商品 -->
        <p>是否显示</p>
        <el-select
          v-model="commodityStatus"
          clearable
          placeholder="请选择"
          @change="changeData(pageIndex, pageSize)"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="seckill-name">
        <!-- 搜索秒杀商品 -->
        <p>秒杀名称：</p>
        <el-input
          v-model="input"
          placeholder="请输入秒杀名称"
        />
      </div>
    </div>
    <div class="addition">
      <el-button
        type="primary"
        @click="changePopout"
      >
        添加秒杀配置
      </el-button>
      <Popout
        v-show="showFlag"
        @isShowFlag="isShowFlag"
      />
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      max-height="400"
    >
      <el-table-column
        prop="id"
        label="ID"
        align="center"
      />
      <el-table-column
        prop="name"
        label="秒杀名称"
        align="center"
      />
      <el-table-column
        prop="period"
        label="秒杀时段"
        align="center"
      />
      <el-table-column
        label="轮播图"
        align="center"
      >
        <template slot-scope="scope">
          <img :src="scope.row.address">
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="创建时间"
        align="center"
      />
      <el-table-column
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status === 1"
            active-color="#1890ff"
            inactive-color="#dcdfe6"
            @input="setStatus($event, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <footer>
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>
    <Dialog
      v-if="showPile"
      :scops="scops"
      @isShowPile="isShowPile"
    />
  </div>
</template>

<script>
import {deployList} from '../../../../api/seckillList'
import Popout from "./Popout";
import Dialog from "../../../../components/Dialog/index";

export default {
  components: {
    Popout,
    Dialog,
  },
  data() {
    return {
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "无状态",
        },
        {
          value: "1",
          label: "有状态",
        },
      ],
      value: "",
      input: "",
      tableData: [],
      currentPage4: 1,
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      showFlag: false,
      commodityStatus: null,
      scops: {},
      showPile: false,
    };
  },
  watch: {
    input() {
      //防抖
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.changeData(this.pageIndex, this.pageSize);
      }, 700);
    },
  },
  created() {
    this.changeData(this.pageIndex, this.pageSize);
  },
  methods: {
    isShowFlag() {
      this.showFlag = false;
    },
    setStatus(status, row) {
      setTimeout(() => {
        // eslint-disable-next-line no-constant-condition
        if (true) {
          row.status = status ? 1 : 0;
        }
      }, 500);
    },
    changeData(ind, page) {
        deployList({
         pageIndex: ind,
          pageSize: page,
          keyWord: this.input,
          status: this.commodityStatus,
        })
        .then((res) => {
          if (res.code === 20000) {
            this.tableData = res.data;
            this.total = res.total;
          }
        });
    },
    handleClick(row) {
      this.showPile = true;
      console.log(row);
      this.scops = row;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.changeData(this.pageIndex, val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.changeData(val, this.pageSize);
    },
    changePopout(data) {
      console.log("asdasd",data);
      // console.log(flag,form);
      this.showFlag = true;
    },
    isShowPile(data) {
      console.log("alisstsd",data);
      this.showPile = false;
    },
    handleDelete(row) {
      this.tableData = this.tableData.filter((item) => {
        return item.id !== row.id;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.seckill {
  width: 100%;
  height: 100%;
  background: #ffffff;
  padding: 20px 20px 10px 20px;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: left;
    align-items: center;
    .seckill-visible {
      height: 100%;
      display: flex;
      align-items: center;
      p {
        font-size: 16px;
        color: #564e53;
        font-weight: bold;
        margin-right: 10px;
      }
    }
    .seckill-name {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 30px;
      p {
        font-size: 16px;
        color: #564e53;
        font-weight: bold;
        margin-right: 10px;
      }
      ::v-deep .el-input {
        width: 208px;
      }
    }
  }
  .addition {
    width: 100%;
    height: 40px;
    // padding-left: 16px;
    margin: 20px 0;
  }
  footer {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
}
</style>
